import { defineComponent, reactive, watch } from 'vue';
import { DoubleColumnsResize } from '@/../packages';
import styles from './index.module.less';

export default defineComponent({
    setup() {
        const state = reactive({
            mode: 'horizontal',
            // firstSize: 100,
        });

        watch([state], (val) => console.log(val));

        // setTimeout(() => {
        //     state.firstSize = 500;
        // }, 500);

        return () => (<div class={[styles.container]}>
            <div class={[styles.innerContainer]}>
                <DoubleColumnsResize mode={state.mode}>{{
                    firstContent: () => <div>
                        <select v-model={state.mode}>
                            <option value="horizontal">horizontal</option>
                            <option value="vertical">vertical</option>
                        </select>
                    </div>,
                    secondContent: () => <div>right</div>,
                }}</DoubleColumnsResize>
            </div>
        </div>)
    },
})

